<!--
 * @Author: 陈昌俊
 * @Date: 2021-09-03 09:41:59
 * @LastEditTime: 2021-11-11 18:59:18
 * @LastEditors: 杨超
 * @Description: 
-->
<template>
    <div id="container" />
</template>

<script>
import { mapKey } from '@/config/settings'
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
    name: 'BaseMap',
    props: {
        option: {
            type: Object,
            default: () => ({})
        },
    },
    watch: {
        option: {
            handler() {
                this.init()
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        init() {
            const defaultOption = {
                key: mapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
                version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                // 初始地图中心点
                plugins: [
                    'AMap.Scale'
                ]// 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }
            const option = { ...defaultOption, ...option }
            AMapLoader.load(option).then((AMap) => {
                const map = new AMap.Map('container', { zoom: 12, })
                // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
                map.addControl(new AMap.Scale())
                
                if (!this.option.location || this.option.location.length === 0) { return }
                const marker = new AMap.Marker({
                    icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                    position: this.option.location
                })
                map.add(marker)
                map.setFitView()
                this.$emit('load', map, AMap)
            }).catch(e => {
                console.log(e)
            })
        }
    }
}
</script>

<style lang="scss" scoped >
// 去除高德地图默认logo
::v-deep {
    .amap-logo {
        display: none !important;
        visibility: hidden !important;
    }
    .amap-copyright {
        display: none !important;
        visibility: hidden !important;
    }
}
</style>
